<template>
  <div class="content">
    <div id="top">
      <div class="return">
        <div class="top_arrow returnCon"></div>
      </div>
      <div class="topMid fontW">图文详情</div>
    </div>
    <ul class="nav tabs" id="uiFixedTab">
      <a class="active" id="goodsDetail">图文详情</a>
      <a id="introBtn" v-tap="{methods:goSlide,index:1}">规格说明</a>
      <a id="qualification">正品授权</a>
    </ul>
    <swiper :options="swiperOption">
      <swiper-slide><img v-for="slideImg in imgs" :src="slideImg"  class="swiperImg" ></swiper-slide>
      <swiper-slide><img  class="swiperImg" ></swiper-slide>
      <swiper-slide><img  class="swiperImg" ></swiper-slide>
      <!--<div class="swiper-pagination" slot="pagination"></div>-->
    </swiper>

  </div>
</template>
<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  let type={
    0:'detail',
    1:'format',
    2:'cert'
  }
  export default{
      name:'orderList',
    data: function () {
      return {
        imgs:[],
        swiperOption: {
//          autoplay: 500,
//          initialSlide: 1,
//          loop: true,
          //pagination: '.swiper-pagination',
          onSlideChangeEnd: swiper => {
  //            console.log('onSlideChangeEnd', swiper.realIndex)
          }
        }
      }
    },
    components: {
      swiper,
      swiperSlide,
    },
    mounted: function () {
//      this.$nextTick(function () {
//        this.loadingState = true;
//        this.queryAddress();
//      });
//      console.info(this.$data)
    },
    methods: {
      getData (index) {
       let params= {
          'act': type[index],
          'goods_id': '580ec2aab806c2080581a86c',
        }
        let self = this
        self.$rpc(self.$api.good_detail, params, function (data, res) {
          self.reqData = Object.assign({}, self.reqData, data)
          self.imgs=data.img
          console.info(data.img)
        })
      },
      goSlide(params){
        this.getData(params.index)
        console.info(params.index)
      }
    },
    // 创建的时候请求数据
    created () {
      this.getData(0)
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  body {background:#f3f4f5;}
  #tabs-container{padding-top:110px;width: 100%; overflow:hidden;}
  .swiper-slide {

    overflow:hidden;
  }
  .swiper-slide{height:16px}
  .swiper-slide-active{ height:auto;}
  .tabs {position:fixed; top:44px; background:#fff; z-index:10;}
  .tabs a{margin:0 7%; font-size:16px;}
  .good,.take_good {margin-bottom:10px;}
  .good>p,.take_good>p {background:#fff;padding:7px;}
  .red {color:#ea5858;}
  .blue {color:#5dbfb8;}
  /*.good .status,.take_good .status {margin-right:4px;}*/
  .good_list .good_detail {padding:15px;position:relative;}
  .good_list .good_detail p {margin-left:26%;}
  .good_list .good_detail p:first-of-type {font-size:15px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;line-height:30px;}
  .good_list .good_detail p:nth-of-type(2) {position: absolute;left:2%;bottom:18px;color:#ea5858;font-size:17px;}
  .good_list .good_detail p:nth-of-type(2) .dollar {font-size:12px;margin-right:6px;}
  .good_list .img {width:24%; margin-right:10px;}
  .good_list .total {font-size:13px;text-align: right;padding:12px 15px 12px 0;background:#fff;border-bottom:1px solid #d7d7d7;}
  .good_list .sum {margin-right:6px;}
  .good_list .money {font-size:18px;}
  .take_good .pay {background:#fff;}
  .good .pay a,.take_good .pay a {padding:6px 10px;border-radius:6px;-webkit-border-radius:6px; margin-left:10px;}
  .take_good .pack,.good .pay a {border:1px solid #ea5858;color:#ea5858;}
  .take_good ul li {float:left;width:20%;box-sizing:border-box;-webkit-box-sizing:border-box;margin-right:2%;}
  .take_good .pay .view {border:1px solid #333;color:#333;}

  .good_list .good_detail2{width:23%; float:left; padding:15px 0 15px 15px; position:static;}
  .good_list .good_detail2 .img{width:100%; min-width:60px;min-height:60px;}
  .good_list .good_detail .img{min-width:70px; min-height:70px;}
  .goodsLink{display:block;}
  .good_list .imgBox{overflow:hidden;}

  /*优惠券*/
  .couponsBox{width:100%; margin:0 auto; text-align:center;color: #f5c44b; position:fixed; top:30%; left:0%; margin-left:0px; z-index:106;}
  .couponsBox .couponsCon{ height: 210px;
    text-align: center;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;}
  .couponsCon>.couponsList{display:inline-block;height: 170px;}
  .couponsBox .closeBtn{width:30px; height:30px; float:right; margin-top:-35px; margin-right:20px;}

  .couponsBox .header{padding:15px 0;}
  .couponsBox .header span{color:#ea5858; border:1px solid #ea5858; padding:5px 20px;}
  .couponsBox .header label{line-height:31px;}

  .couponsList{width:180px;font-weight: bold; margin:0 10px 0 5px;/*background: url(../../assets/images/coupons/pay.png) no-repeat; */background-size:100% 100%;}
  .couponsList p{padding:37px 0 15px;text-indent:15px; font-size:16px;}
  .couponsList .amount{width:101%;margin-top: 0px}
  .amount b{font-weight: bold;}
  .amount span{font-size: 18px;}
  .couponsList .title{font-size: 16px; border-bottom: 1px dashed #e1e1e1; padding-bottom: 7px;color: #824094;}
  .couponsList .condition{font-size: 12px;padding: 7px 0 0;}
  .couponsList .couponDetail{width: 68%;}
  .endTime{text-indent: 58px;}
  .orderListBox2 #orderList li .toView{display:block;}

  /*预售*/
  .good .code{font-size:12px;}
  .good .code .status{margin-top:2px;}
  .code label{display:inline-block;color:#824094; border:1px solid #824094; padding:2px 5px;}
</style>
